<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>音乐发布</title>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<div style="width: 40%;margin-left:30%;margin-top: 20px" class="animated fadeInDown">
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">输入歌手名</label>
        <input class="form-control" id="exampleFormControlInput1" placeholder="输入歌手名（不能为空）">
    </div>
    <label for="exampleFormControlInput1" class="form-label">请选择歌曲的榜单</label>
    <select class="form-select" aria-label="Default select example" id="select_1">
        <option selected>选择</option>
        <option>网络流行榜</option>
        <option>电影音乐榜</option>
        <option>抖音传唱榜</option>
        <option>网易热门榜</option>
        <option>酷狗TOP榜 </option>
        <option>DJ热歌榜  </option>
        <option>欧美音乐榜</option>
        <option>韩语音乐榜</option>
        <option>日语音乐榜</option>
        <option>古装金曲榜</option>
        <option>电影主题榜</option>
        <option>爱国热血榜</option>
        <option>80热歌榜  </option>
        <option>90热歌榜  </option>
        <option>粤语金曲榜</option>
    </select>
    <br>
    <label for="validationCustom04" class="form-label">请选择歌曲的标签</label>
    <select class="form-select" id="validationCustom04" required>
        <option selected disabled value="">选择...</option>
        <option>古风</option>
        <option>伤感</option>
        <option>治愈</option>
        <option>民族</option>
        <option>网络歌曲</option>
        <option>感动</option>
        <option>兴奋</option>
        <option>快乐</option>
        <option>安静</option>
        <option>影视原声</option>
    </select>
    <br>
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">请输入歌曲描述</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <label for="exampleFormControlTextarea1" class="form-label">上传音乐文件</label>
    <input class="form-control form-control-lg" id="formFileLg" type="file">
    <br>
    <!--<div class="mb-3">-->
        <!--<label for="formFileSm" class="form-label">请上传歌曲封面</label>-->
        <!--<input class="form-control form-control-sm" id="formFileSm" type="file">-->
    <!--</div>-->
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">请上传歌曲封面</label>
        <input class="form-control" id="formFileSm" placeholder="请上传歌曲封面">
    </div>
    <div class="col-12">
        <button class="btn btn-primary .modal-dialog-centered" onclick="upload()">提交</button>
    </div>
</div>
</body>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/VarGloba.js"></script>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script>
    function upload() {
        var url = BaseURL+"music/musicUpload";
        var fileBtn = $("input[id=formFileLg]");
        var filePBtn = $("input[id=formFileSm]");
        var musicFileObj = fileBtn.get(0).files[0];
        // var photoObj = filePBtn.get(0).files[0];
        var photoObj = $("#formFileSm").val();
        var music_author = $("#exampleFormControlInput1").val();
        var music_type = $("#select_1").val();
        var music_note = $("#exampleFormControlTextarea1").val();
        var music_tage = $("#validationCustom04").val();
        if (music_author == undefined || music_author == ""){
            alert("歌手名不能为空")
        }else if (music_type == undefined || music_type == "") {
            alert("请选择一个音乐类型")
        }else if (music_note == undefined || music_note == "") {
            alert("音乐描述不能为空")
        }else if (music_tage == undefined || music_tage == "") {
            alert("请选择一个音乐标签")
        }else {
            var fileFrom = new FormData();
            fileFrom.append("musicFile",musicFileObj);
            fileFrom.append("music_author",music_author);
            fileFrom.append("music_note",music_note);
            fileFrom.append("music_photourl",photoObj);
            fileFrom.append("music_type",music_type);
            fileFrom.append("music_tage",music_tage);
            var xhr = new XMLHttpRequest();
            xhr.open("post",url,true);
            xhr.onload = function (ev) {
                var currentTarget = ev.currentTarget;
                var code = currentTarget.status;
                if (code == 200){
                    window.location.href = BaseURL+"mypage";
                } else {
                    alert("文件上传失败")
                }
            };
            xhr.send(fileFrom);
        }
    }
</script>
</html>